<template>
  <div>
    <a-descriptions class="label" v-for="(value, key, index) in detailData" :key="index" :title="key | titleFilter">
      <a-descriptions-item v-for="(val, key, index) in value" :key="index" :label="key | keyFilter">
        <span>{{val}}</span>
      </a-descriptions-item>
      <a-descriptions-item v-if="key =='socialSecurityInfo'">
        <div style="width: 960px">
          <a-table :columns="socialSecurityFundColumns" :data-source="dataArr" bordered :pagination="false" rowKey="id" :scroll="{x: true}"></a-table>
        </div>
      </a-descriptions-item>
    </a-descriptions>

    <Modal :modalShow="modalShow">
      <div slot="policy">
        <!-- <a-col :span="1"></a-col> -->
        <p>根据城市规定, 不支持补缴 <a>查看政策>></a></p>
      </div>
    </Modal>
  </div>
</template>
  
<script>
import datas from '@/utils/data'
import Modal from '@/pages/components/socialSecurityFund/modal'
import { getPolicyItemListByPolicyIdApi } from '@/services/socialSecurityFund'


export default {
  name: '',
  filters: {
    titleFilter (str) {
      switch (str) {
        case 'basicInfo':
          return '基本信息'
        case 'socialSecurityInfo':
          return '社保信息'
        case 'accumulationFund':
          return '公积金信息'
      }
    },
    keyFilter (str) {
      switch (str) {
        case 'idNo':
          return '身份证'
        case 'registeredNature':
          return '户口性质'
        case 'ownProName':
          return '所属项目'
        case 'zxSupplier':
          return '执行供应商'
        case 'socialSecurityPlace':
          return '社保参保地'
        case 'socialSecurityPayDate':
          return '起缴月份'
        case 'socialSecurityPayEndDate':
          return '停缴月份'
        case 'accumulationFundPlace':
          return '公积金参保地'
        case 'thePayDate':
          return '起缴月份'
        case 'thePayEndData':
          return '停缴月份'
        case 'personalPayBase':
          return '个人缴纳基数'
        case 'companyPayBase':
          return '公司缴纳基数'
        case 'payBase':
          return '缴纳比例'
      }
    }
  },
  created () {
    // this.modalShow = true   

    // if (this.tabdata) {      
    //   if (this.tabdata.solution) {
    //     let { fundPolicy } = this.tabdata.solution        
    //     if (fundPolicy) {
    //       this.getPolicyData(fundPolicy.id)
    //     }
    //   }
    // }
  },
  props: ['tabdata'],
  components: { Modal },
  data () {
    return {
      socialSecurityFundColumns: datas.socialSecurityFundColumns,
      modalShow: false,
      fundInfoData: []
    }
  },
  watch: {
    tabdata (n, o) {
      // if (n.solution) {
      //   let { fundPolicy } = n.solution
      //   if (fundPolicy) {
      //     this.getPolicyData(fundPolicy.id)
      //   }
      // }
    }
  },
  computed: {
    detailData () {
      let $detailData

      if (this.tabdata) {
        let { idCard, solution, project, socialArchives, fundArchives } = this.tabdata

        // let _payBase
        // if (this.fundInfoData.length != 0) { // 百万接口
        //   let { companyAddAmt, companyPercent, personAddAmt, personPercent } = this.fundInfoData[0]
        //   _payBase = `${companyPercent}${companyAddAmt ? +companyAddAmt : ''} + ${personPercent}${personAddAmt ? +personAddAmt : ''}`
        // }

        let _payBase
        if (fundArchives) {
          let { companyPayPercent, personPayPercent } = fundArchives
          _payBase = `${companyPayPercent ? companyPayPercent : '-'} + ${personPayPercent ? personPayPercent : '-'}`
        }

        let detailData = {
          basicInfo: {
            idNo: idCard,
            registeredNature: solution?.registerType ? solution.registerType : '未知',
            ownProName: project?.name,
            zxSupplier: socialArchives?.supplier?.fullName ? socialArchives?.supplier?.fullName : '暂无',
          },
          socialSecurityInfo: {
            socialSecurityPlace: solution?.city?.name,
            socialSecurityPayDate: socialArchives?.beginMonth ? socialArchives?.beginMonth : '暂无',
            socialSecurityPayEndDate: socialArchives?.endMonth ? socialArchives?.endMonth : '暂无'
          },
          accumulationFund: {
            accumulationFundPlace: solution?.city?.name,
            thePayDate: fundArchives?.beginMonth ? fundArchives?.beginMonth : '暂无',
            thePayEndData: fundArchives?.endMonth ? fundArchives?.endMonth : '暂无',
            personalPayBase: fundArchives?.personBaseAmt,
            companyPayBase: fundArchives?.companyBaseAmt,
            payBase: _payBase
          },
        }
        $detailData = detailData
      }

      return $detailData
    },

    dataArr () {
      let _arr

      if (this.tabdata.socialArchives) {
        let personObj = { ...this.tabdata.socialArchives.personArchives, id: 1, pro: '个人缴纳基数' }
        let companyObj = { ...this.tabdata.socialArchives.companyArchives, id: 2, pro: '公司缴纳基数' }

        let $arr = [
          personObj,
          companyObj
        ]
        _arr = $arr
      }

      return _arr
    }
  },
  methods: {
    getPolicyData (id) {
      if (id) {
        getPolicyItemListByPolicyIdApi(id).then(res => {
          let { code, msg, data } = res.data
          if (code === 200) {
            this.fundInfoData = data
          } else {
            this.$message.error(msg)
          }
        })
      }
    },
  }
}
</script>
  
<style scoped lang='less'>
.label {
  position: relative;
  padding-left: 10px;
  margin-top: 16px;
  &:before {
    display: block;
    content: "";
    width: 4px;
    height: 16px;
    background: skyblue;
    position: absolute;
    top: 5px;
    left: 1px;
  }
  &:first-of-type {
    margin-top: 0;
  }
}
</style>